<template>
	<view class="add_box">
		<!-- <view class="add_item">
			<view>相关客户</view>
			<picker mode="selector" :range="userList" @change="getPickerValue" class="add_picker" :range-key="'title'">
				<text>{{userIndex == -1 ? "请选择相关客户" : userList[userIndex].title}}</text>
				<image src="/static/images/right.png" class="right"></image>
			</picker>
		</view> -->
		<!-- <view class="add_item">
			<view>商户头像</view>
			<image mode="aspectFill" :src="upJson.avatar" class="add_header" @tap="addHeader(1)"></image>
		</view> -->
		<view class="add_item">
			<view>客户名称</view>
			<input type="text" :value="upJson.title" placeholder="请输入商户名称" :data-name="'title'" @input="getInputValue"/>
		</view>
		<view class="add_item">
			<view>联系人</view>
			<input type="text" :value="upJson.name" placeholder="请输入联系人" :data-name="'name'" @input="getInputValue"/>
		</view>
		<view class="add_item">
			<view>手机号</view>
			<input type="text" :value="upJson.mobile" placeholder="请输入手机号码" :data-name="'mobile'" @input="getInputValue"/>
		</view>
		<view class="add_item">
			<view>地址</view>
			<view class="add_addr" @tap="getAddr()">
				<image src="/static/images/addr.png"></image>
				<view>{{upJson.address == "" ? "点击选择客户地址" : upJson.address}}</view>
				<image src="/static/images/right.png" class="right"></image>
			</view>
		</view>
		<view class="add_item">
			<view>详细地址</view>
			<input type="text" :value="upJson.detailed_address" placeholder="请输入客户详细地址，例1层101室" :data-name="'detailed_address'" @input="getInputValue"/>
		</view>
		<!-- <view class="add_item">
			<view>质保到期时间</view>
			<Time :fields="'second'" :lang="false" :time="upJson.save_at" @getDate="getDate"></Time>
		</view> -->
		<view class="add_textarea">
			<view>备注</view>
			<textarea :value="upJson.desc" placeholder="请输入备注" :data-name="'desc'" @input="getInputValue"/>
		</view>
		<view class="add_image">
			<view>上传照片</view>
			<view class="add_image_box">
				<image v-for="(item,index) in images" :src="item" class="add_header" @tap="showImage(index)" @longpress="loogtabImg(index)"></image>
				<image src="/static/images/img_add.png" mode="aspectFill" @tap="addHeader(2)"></image>
			</view>
		</view>
		
		<view class="save" @tap="save()">提交</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:0,
				userIndex:-1,
				images:[],
				userList:[],
				customer_name:"",
				upJson:{
					"title":"",//客户名称
					"country":"", //区域
					"name":"", //联系人
					"company":"",// 公司
					"mobile":"",//联系方式
					"province":"",//省
					"city":"",//市
					"area":"",//区
					"address":"",//地址
					"detailed_address":"",// 详细地址
					"desc":"",//备注
					"class": 2,   //puno
					"avatar":"",
					save_at:"",
					"image":"",
					customer_id:"",
					"user_id":uni.getStorageSync("userId")
				},
			}
		},
		onLoad() {
			// 员工级别
			let belong = this.$store.getters.userInfo.branch_type != 1 ? 1 : 2;

			this.$api.getClientList({class:1,belong:belong,user_id:uni.getStorageSync("userId")}).then(res =>{
				this.userList = res.data;
			})
		},
		methods:{
			getPickerValue(e){
				this.userIndex = e.detail.value
				this.upJson.customer_id = this.userList[e.detail.value].id;
				this.upJson.avatar = this.userList[e.detail.value].avatar;
				this.upJson.title = this.userList[e.detail.value].title;
				this.upJson.name = this.userList[e.detail.value].name;
				this.upJson.mobile = this.userList[e.detail.value].mobile;
				this.upJson.address = this.userList[e.detail.value].address;
			},
			showImage(index){
				wx.previewImage({
					current:this.images[index],
					urls:this.images
				})
			},
			loogtabImg(index){ // 长按删除
				uni.showModal({
					title:"提示",
					content:"确定要删除此图片吗？",
					success:res => {
						if(res.confirm){
							this.images.splice(index, 1)
						}
					}
				})
			},
			addHeader(type){
				uni.chooseImage({
					count:type == 1 ? 1 : 9,
					success:res => {
						this.$api.uploadFile(res.tempFilePaths).then(res => {
							if(type == 1){
								this.upJson.avatar = res[0]
							}else if(type == 2){
								this.images.push.apply(this.images,res);
							}
						})
					}
				})
			},
			getInputValue(e){//获取数据
				this.upJson[e.currentTarget.dataset.name] = e.detail.value;
			},
			getDate(e){
				this.upJson.save_at = e.dete;
			},
			getAddr(){
					let that = this;
					uni.chooseLocation({
						success(e) {
							that.upJson.longitude = e.longitude;
							that.upJson.latitude = e.latitude;
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							if(e.address){
								that.upJson.address = e.address;
								that.upJson.province = e.address.match(reg)[0];
								that.upJson.city = e.address.match(reg)[1];
								that.upJson.area = e.address.match(reg)[2];
							}
						}
					})
			},
			save(){
				if(this.upJson.title.length < 1){
					uni.showToast({title:"商户名称不能为空",icon:"none"})
				}else if(this.upJson.name.length < 1){
					uni.showToast({title:"联系人不能为空",icon:"none"})
				}else if(this.upJson.mobile.length != 11){
					uni.showToast({title:"联系电话格式错误",icon:"none"})
				}else if(this.upJson.address.length < 1){
					uni.showToast({title:"地址不能为空",icon:"none"})
				}else if(this.upJson.detailed_address.length < 1){
					uni.showToast({title:"详细地址不能为空",icon:"none"})
				}else{
					this.$app.globalData.upData.client = true;
					this.$app.globalData.upData.clientInfo[0] = true;
					for(let i in this.images){
						i == 0 ? this.upJson.image += this.images[i] : this.upJson.image += "|" + this.images[i]
					}
					this.$api.addClient(this.upJson,this.type)
				}
				
			}
		}
	}
</script>

<style>
</style>
